﻿@{
    Layout = null;
}

<style>
    /*溯源-体验中心*/
    .centerPageContent
    {
        background: white;
        width: 100%;
        height: 80vh;
        display: flex;
        flex-wrap: wrap;
    }

    .module
    {
        background-color: #eaedf1;
        width: 46.6%;
        height: 53%;
        margin: 1.7%;
        position: relative;
    }

    .module::after{
        content: "";
        display: block;
        clear: both;
    }

    .fr
    {
        float: right;
        width: 54.5%;
        position: absolute;
        bottom: 0;
        right: 0;
        padding-right: 4%;
        padding-top: 3%;
        height: 100%;
    }

    .btn-success
    {
        background-color: #50ae55;
    }

    .btn-success:hover
    {
        background-color: #79bf79;
    }

    .module > div:first-child
    {
        float: left;
        width: 45.5%;
        height: 100%;
        overflow: hidden;
    }

    .module > div:first-child > img
    {
        width: 100%;
        height: 100%;
    }

    .specifications
    {
        padding: 5% 0;
        margin: 0;
        font-size: 3rem;
        color: #37474f;
        font-weight: 900;
    }

    .specifications > span:nth-child(1)
    {
        font-size: 24px;
    }

    .specifications > span:nth-child(2), .font12
    {
        font-size: 1.4rem;
        color: #76838f;
    }

    .merits
    {
        color: #76838f;
        font-size: 1.4rem;
        background: #FFFFFF;
        padding: 0 3%;
        margin: 7% 0 6%;
        height: 35%;
    }

    .btn-css
    {
        width: 43%;
        padding: 2% 4%;
    }

    .green
    {
        color: #50ae55;
        margin-top: 2%;
        display: block;
        text-decoration: underline;
    }

    .QrCode
    {
        display: block;
        position: relative;
        width: 67.5%;
        height: 79%;
        background: #000000;
        opacity: 0;
        top: -79%;
        -moz-opacity: 0;
        left: 16%;
    }

    .QrCode:hover
    {
        opacity: 0.8;
    }

    .QrCode > img
    {
        margin: 0 auto;
        display: block;
        padding: 50% 0;
        max-width: 100%;
    }
</style>
<script src="~/Scripts/MGJJS/TraceSource/PageOperation/ExperienceCenter.js"></script>
<div class="centerPageContent">
    <div class="module">
        <div>
            <img src="~/Content/webImgs/TraceSource/ExperienceCenter/EXC_1.png" />
            <a class="QrCode"><img src="~/Content/webImgs/TraceSource/ExperienceCenter/qrcode.png" /></a>
        </div>
        <div class="fr">
            <h2 class="specifications">标准版&nbsp;<span>&yen; 800</span><span>/年</span></h2>
            <div class="font12">如有更高存储需求，可订购额外的数据盘接驳至主 机：1G=1元/月</div>
            <div class="merits">
                <div>一、平台认证标识  </div>
                <div>二、产品照片（可更换）</div>
                <div>三、产品户口本 </div>
                <div>四、公司简介</div>
            </div>
            <div>
                <a id="StandardEdition" class="btn btn-success btn-css" onclick="$.MGJ.ExperienceCenter.Ajax_AddMaterial(0)">
                    创建溯源
                    <span class="site-menu-title" style="display:none">标准版</span>
                </a>
            </div>
            <a class="green" data-toggle="modal" data-target="#vedioModal" onclick="changeVedioUrl('UploadFile/bzb.mp4')">查看创建教程</a>
        </div>
    </div>
    <div class="module">
        <div>
            <img src="~/Content/webImgs/TraceSource/ExperienceCenter/EXC_2.png" />
            <a class="QrCode"><img src="~/Content/webImgs/TraceSource/ExperienceCenter/qrcode.png" /></a>
        </div>
        <div class="fr">
            <h2 class="specifications">黄金版&nbsp;<span>&yen; 1280</span><span>/年</span></h2>
            <div class="font12">如有更高存储需求，可订购额外的数据盘接驳至主 机：1G=1元/月</div>
            <div class="merits">
                <div>一、平台认证标识  </div>
                <div>二、产品照片（可更换）</div>
                <div>三、产品户口本 </div>
                <div>四、溯源档案 </div>
                <div>五、公司简介</div>
            </div>
            <div>
                <a id="GoldEdition" class="btn btn-success btn-css" onclick="$.MGJ.ExperienceCenter.Ajax_AddMaterial(1)">
                    创建溯源
                    <span class="site-menu-title" style="display:none">黄金版</span>
                </a>
            </div>
            <a class="green" data-toggle="modal" data-target="#vedioModal" onclick="changeVedioUrl('UploadFile/hjb.mp4')">查看创建教程</a>
        </div>
    </div>
    <div class="module">
        <div>
            <img src="~/Content/webImgs/TraceSource/ExperienceCenter/EXC_3.png" />
            <a class="QrCode"><img src="~/Content/webImgs/TraceSource/ExperienceCenter/qrcode.png" /></a>
        </div>
        <div class="fr">
            <h2 class="specifications">白金版&nbsp;<span>&yen; 1688</span><span>/年</span></h2>
            <div class="font12">如有更高存储需求，可订购额外的数据盘接驳至主 机：1G=1元/月</div>
            <div class="merits">
                平台认证标识、产品照片（可更换）、产品 户口本、溯源档案、公司简介、综合评分（ 根据企业在平台的信息完整度进行评分）、 附近门店（根据消费者扫码位置搜索该产品 附近门店并推送）、购买渠道等。
            </div>
            <div>
                @*<a id="PlatinumEdition" class="btn btn-success btn-css" onclick="$.MGJ.ExperienceCenter.Ajax_AddMaterial(2)">创建溯源</a>*@
                <a id="PlatinumEdition" class="btn btn-success btn-css" onclick="alert('白金版正在开发中')">创建溯源</a>
            </div>
            <a class="green" data-toggle="modal" data-target="#vedioModal" onclick="changeVedioUrl('UploadFile/bjb.mp4')">查看创建教程</a>
        </div>
    </div>
    <div class="module">
        <div>
            <img src="~/Content/webImgs/TraceSource/ExperienceCenter/EXC_4.png" />
            <a class="QrCode"><img src="~/Content/webImgs/TraceSource/ExperienceCenter/qrcode.png" /></a>
        </div>
        <div class="fr">
            <h2 class="specifications">钻石版&nbsp;<span>&yen; 5980</span><span>/年</span></h2>
            <div class="font12">如有更高存储需求，可订购额外的数据盘接驳至主 机：1G=1元/月</div>
            <div class="merits">
                <div>一、平台认证标识  </div>
                <div>二、产品照片（可更换）</div>
                <div>三、产品户口本 </div>
                <div>四、所有版本模块可进行自由编辑组合</div>
            </div>
            <div>
                <a id="DiamondEdition" class="btn btn-success btn-css" onclick="$.MGJ.ExperienceCenter.Ajax_AddMaterial(3)">
                    创建溯源
                    <span class="site-menu-title" style="display:none">钻石版</span>
                </a>
            </div>
            <a class="green" data-toggle="modal" data-target="#vedioModal" onclick="changeVedioUrl('UploadFile/zsb.mp4')">查看创建教程</a>
        </div>
    </div>
</div>

<div id="vedioModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title" id="myModalLabel">视频教程</h5>
            </div>
            <div class="modal-body">
                <video controls="controls" id="MarketVideo">
                    <source src="" type="video/mp4" />
                    <source src="" type="video/webm" />
                    <source src="" type="video/ogg" />
                    您的浏览器不支持该视频,请使用谷歌浏览器！
                </video>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>


    function changeVedioUrl(url) {
     
        url = url || 'https://static.gethover.com/build/images/media/hover-passport-1080p-b301b95feb.mp4';
        $('#MarketVideo').attr('src', url);
    }

    $('#vedioModal').on('hidden.bs.modal', function (e) {
        if (!MarketVideo.paused)
            MarketVideo.pause();
    })
    $('#vedioModal').on('shown.bs.modal', function (e) {
        if (MarketVideo.paused)
            MarketVideo.play();
    })






</script>